import React,{useState,useEffect} from 'react'
import { useLocation } from "react-router-dom"
import { DropdownMenu } from 'react-vant'
function Info() {
    let location = useLocation()
    const options = [
        { text: '言情', value: '言情' },
        { text: '都市', value: '都市' },
        { text: '全部', value: '全部' },
    ]
    const option2 = [
        { text: '连载', value: '连载' },
        { text: '完本', value: '完本' },
        { text: '全部', value: '全部' },
      ]
    const [value, setValue] = useState({all: '全部', classifly: '全部'})
    const [arr,setArr] = useState(location.state.data.children)
    console.log(arr,"arr")
    const mychange = (val)=>{
        console.log(val);
        setValue(val)
    }
    useEffect(()=>{
        if (value.all === "全部" && value.classifly === "全部") {
            setArr(location.state.data.children)
        } else {
            let newarr  = location.state.data.children.filter((item,index)=>{
                return item.all == value.all && item.classifly == value.classifly
            })
            setArr(newarr)
        }
         
    },[value])

     
    return (
        <div>
            <DropdownMenu value={value} onChange={mychange}>
                <DropdownMenu.Item name='classifly' options={options} />
                <DropdownMenu.Item name='all' options={option2} />
            </DropdownMenu>
            )
            {
               arr && arr.length ? arr.map((item, index) => {
                    return <dl key={index}>
                        <dt>
                            <img src={item.img} alt="" />
                        </dt>
                        <dd>
                            {item.tit}
                        </dd>
                    </dl>
                }) : "暂无数据"
            }
        </div>
    )
}

export default Info